<template>
    <div class="InspectChart" ref="ChartView"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { init } from 'echarts'
const ChartView = ref();
const props = defineProps({
    ChartData: {
        default: () => {
            return {
                ChartData: [],
                totalPoints: 0,
            }
        }
    },
})

let Chart = null;
const option = {
    tooltip: { trigger: 'axis' },
    radar: {
        // axisName: { show: false },
        indicator: [
            { name: '规范性', max: 5 },
            { name: '严谨性', max: 5 },
            { name: '复用性', max: 5 },
            { name: '还原度', max: 5 },
            { name: '整洁度', max: 5 }
        ],
        radius: 60,
        center: ['50%', '55%'],
    },
    series: [{
        type: 'radar',
        tooltip: { trigger: 'item' },
        areaStyle: {},
        label: { show: false, },
        data: [{
            value: props.ChartData.ChartData,
            name: '总分：' + (props.ChartData.totalPoints ? props.ChartData.totalPoints : '未得分')
        }]
    }]
};

onMounted(() => {
    Chart = init(ChartView.value);
    Chart.setOption(option);
})




</script>
<style lang="less" scoped>
.InspectChart {
    width: 250px;
    height: 160px;
    margin: 0 auto;
}
</style>